{% extends '_admin.html' %}


{% block main_contain %}
<div class="row" id="Network">
    <div class="col-lg-6">
        <div class="card card-primary">
            <div class="card-header">
              <h3 class="card-title">網絡設置</h3>
            </div>
            <!-- /.card-header -->
            <!-- form start -->
            <form class="form-horizontal" id="SettingForm">
              <div class="card-body">
                <div v-for="(val, key) in Settings" v-if="['state','type'].includes(key)==false" class="form-group row">
                    <label class="col-sm-3 col-form-label text-center">{[ ColumnName[key] ]}：</label>
                    <div class="col-sm-8">
                      <select v-if="key=='method'" v-model="Settings[key]" class="form-control" :name="key" style="font-size: large;">
                        <option  v-for="(val, key) in NetworkMethods" :value="key">{[ val ]}</option>
                      </select>
                      <div v-else-if="key=='ifname'" class="input-group">
                        <input v-model="Settings[key]" type="text" class="form-control" readonly 
                        :class="Settings.state=='True'?'bg-success':'bg-warning'" style="font-size: large;">
                        <div class="input-group-append">
                          <span class="input-group-text"><i class="fas " :class="Settings.type=='ethernet'?'fa-ethernet':'fa-wifi'"></i></span>
                        </div>
                      </div>
                      <input v-else v-model="Settings[key]" type="text" class="form-control" 
                      :readonly="readonly_keys(key)?'readonly':false" style="font-size: large;">
                    </div>
                </div>
              </div>
              <!-- /.card-body -->
              <div class="card-footer text-center">
                <button type="submit" class="btn btn-info">保存設定</button>
              </div>
              <!-- /.card-footer -->
            </form>
          </div>
    </div>
</div>
{% endblock %}


{% block scripts %}
{{ super() }}
<script>
    // 系统参数
    var Network = new Vue({
        el: '#Network',
        delimiters: ['{[', ']}'],
        data: {
          Settings: {
            ifname: '{{ NetworkInfo.ifname }}',
            mac: '{{ NetworkInfo.mac }}',
            state: '{{ NetworkInfo.state }}',
            type: '{{ NetworkInfo.type }}',
            method: '{{ NetworkInfo.method }}',
            addresses: '{{ NetworkInfo.addresses }}',
            gateway: '{{ NetworkInfo.gateway }}',
            dns: '{{ NetworkInfo.dns }}'
          },
          ColumnName: JSON.parse('{{ ColumnNameJSON|safe }}'),
          NetworkMethods: {auto: '自動獲取', manual: '靜態設置'},
        },
        methods:{
          // 锁定
          readonly_keys(key){
            let invalid_keys = ['ifname','mac','state','type']
            if(this.Settings.method=='auto'){invalid_keys.push('addresses','gateway')}
            return invalid_keys.includes(key)
          },
          // 提交表单
          commit_settings(){
            axios.post("{{ url_for('carpark.network') }}", {Update: this.Settings})
            .then(response => {
                if(response.status==200){
                    let ret = response.data
                    AppMessage.fire({icon: ret.icon, text: ret.text})
                    if(ret.icon=='success'){setTimeout("window.location.reload()", 2000)}
                }else{AppMessage.fire({icon: 'error', text: '操作錯誤，請聯係管理員'})}
            })
            .catch(function (error) {alert(error)})
          }
        },
        mounted: function(){
          // 校验
          $('#SettingForm').validate({
              rules: {
                addresses: {required: true},
                gateway: {required: true},
              },
              errorElement: 'span',
              errorPlacement: function (error, element) {
                  error.addClass('invalid-feedback');
                  element.closest('.col-sm-8').append(error);
              },
              highlight: function (element, errorClass, validClass) {$(element).addClass('is-invalid')},
              unhighlight: function (element, errorClass, validClass) {$(element).removeClass('is-invalid')},
              // 提交
              submitHandler: function (){
                Network.commit_settings('Add')
              },
          });
        }
    })
</script>
{% endblock %}